<style lang="scss">
    @import "../utils/base.scss";
    .message_title{
        height: 60px;
        width: 100%;
        position: relative;
        background-color: #FFFFFF;
        border: 1px solid #dcdae2;
    }
    .message_content{
        padding: 8px 8px 0px 8px;
        width: 100%;
        height: calc(100vh - 110px);
        overflow: auto;
    }
</style>
<template>
    <mcontent>
        <template slot="header">
            <div class="message_title">
                <div style="width: 45px; height: 45px;line-height: 50px;float: left; margin-left: 20px;">
                    <img src="../../static/image/user.png" style="width: 100%;border:0;vertical-align:middle">
                </div>
                <div style="float: left;padding-top: 12px;padding-left: 8px">
                    <p>{{this.$store.state.user.user_name}}</p>
                    <span>{{msg}}</span>
                </div>
            </div>

        </template>
        <template slot="left">
            <Menu  :active-name="activeName" :open-names="openName" @on-select="changeMenu" theme="light" width=""  class="ivu-menu-light">
                <MenuItem name="personalInfo" >
                    <Icon type="md-contacts" size="16"/>个人信息
                </MenuItem>
                <Submenu name="1" >
                    <template slot="title"><Icon type="md-chatboxes" size="16"/>我的消息</template>
                    <MenuItem   name="message" >我接受的</MenuItem>
                    <MenuItem  name="myMessage" >我发起的</MenuItem>
                </Submenu>
                <MenuItem name="vacation" >
                    <Icon type="ios-chatbubbles" size="16"/>休假委托
                </MenuItem>
            </Menu>
        </template>
        <template slot="right">
            <div class="message_content">
                <component ref="personal" :is="pageName" ></component>
            </div>
        </template>
    </mcontent>

</template>
<script>
    import mcontent from "../comp_chatter/mcontent"
    import message from './message'
    import myMessage from './my_message'
    import personalInfo from './person_info'
    import vacation from './vacation'

    export default {
        components:{
            mcontent,message,myMessage,personalInfo,vacation
        },
        data(){
            return{
                pageName: "personalInfo",
                openName: [],
                activeName:"personalInfo",
                msg: "你好!"
            }
        },
        created:function(){
            var h = new Date().getHours()
            console.log("h--->",h)
            if(h > 0 && h <= 12){
              this.msg = "上午好!"
            }else if(h > 12 && h < 18){
              this.msg = "下午好!"
            }else {
              this.msg = "晚上好!"
            }
        },
        methods:{
            changeMenu(menu){
                this.pageName = menu
            }
        }

    }
</script>
